/* start light mode styling */
	:root {
		
		--text: rgb(33, 44, 23);
		--border: rgb(54, 58, 53);
		--accent: rgb(64, 141, 12);
		--bg: #a1b499;
		--gradientTop: white;
		--gradientBottom: rgba(243, 255, 240, 0.8);
	}
body {
	padding: 10px;
	font-family: 'MS PGothic', sans-serif;
	color: var(--text);

	/* page background pattern */
	background-color: var(--gradientTop);
	background-image: url("/media/stars.gif");
	background-size: cover;
	background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px;
}
.container {
	max-width: 60rem;
	margin: 5vw auto 12px auto;
	border: 6px ridge var(--border);
	outline: 3px solid var(--gradientTop);
	outline-offset: 4px;
	border-radius: 10px;
	display: flex;
	flex-wrap: wrap;
	padding: 5px;
	gap: 5px;
	}
header {
	background-image: url("/media/notebook.jpg");
	
	background-size: 400px;
	background-repeat: repeat;
	background-position: top;
	width: 100%;
	height: 120px; /* change banner height here*/
	border: 2px ridge var(--border);
	border-radius: 5px;
	position: relative;
}

section-4 {
	border: 2px ridge var(--border);
	background-size: 400px;
	border-radius: 5px;
	background-image: url("../media/d20dced4f45f1c9b25e8313a6b796c8b.jpg");
	padding: 5px;
}